<%--
  Created by IntelliJ IDEA.
  User: xianfei
  Date: 15-7-2
  Time: 下午5:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<html>
<head>
    <title>预定</title>
    <mystyle>
    <link rel="stylesheet" type="text/css" href="/public/css/design.css">
    </mystyle>
</head>
<body>
<!--头部 开始-->
<div class="head">
    <img src="/public/img/reserveSchedule.png" alt="">
</div>
<div class="main reserveInfo">
    <img src="/public/image/${reserveDTO.houseInfoDTO.imageGuids[0]}" class="infoImg" width="563px" height="479px" alt="">

    <div class="infoMain">
        <p style="color: #ce985a;">${reserveDTO.houseInfoDTO.name}</p>

        <p>周次：${reserveDTO.houseWeekDTO.name}</p>

        <p>温馨提示：入住请预定人携带身份证</p>

        <p>便利设施：<img src="/public/img/reserveIcon.png" alt=""></p>
    </div>
</div>
<div class="main reserveWeek">
    <p class="mainTitle"><span>1</span>预定信息</p>
    <table>
        <thead>
        <tr>
            <td>基地:</td>
            <td><input  readonly="value" value="${reserveDTO.houseInfoDTO.name}"></td>
            <td>月份:</td>
            <td>
                <select data-guid="${reserveDTO.houseWeekDTO.guid}" class="weekMonth" onchange="monthChange()">
                    <option value="0">选择月份</option>
                    <c:forEach items="${months}" var="list" varStatus="status">
                        <option value="${list}">${list}月</option>
                    </c:forEach>
                </select>
            </td>
        </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
</div>
<div class="main reserveIncrement">
    <p class="mainTitle"><span>2</span>增值服务</p>
    <table>
        <thead>
        <tr>
            <th width="390px;">服务类型</th>
            <th width="207px">价格（元）</th>
            <th width="209px">选择 </th>
            <th width="114px">总价格</th>
        </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
</div>
<div class="main reserveUser">
    <p class="mainTitle"><span>3</span>填写信息</p>
    <input type="hidden" name="myHouseGuid" id="myHouseGuid" value="${myHouseGuid}"/>
    <table>
        <tr>
            <td width="90px" style="text-align: right">真实姓名</td>
            <td><input style="width: 219px;height: 34px;" id="occupancyName" name="occupancyName" type="text"></td>
            <td width="90px" style="text-align: right">行程安排</td>
            <td><input style="width: 219px;height: 34px;" id="remarks" name="remarks" type="text"></td>
        </tr>
        <tr>
            <td width="90px" style="text-align: right">身份证</td>
            <td><input style="width: 219px;height: 34px;" id="IDCard" name="IDCard" type="text"></td>
            <td width="90px" style="text-align: right">同行人</td>
            <td><input style="width: 219px;height: 34px;" id="peers" name="peers" type="text"></td>
        </tr>
        <tr>
            <td width="90px" style="text-align: right">手机号</td>
            <td><input style="width: 219px;height: 34px;" id="phoneNum" name="phoneNum" type="text"></td>
            <td width="90px" style="text-align: right">邮箱</td>
            <td><input style="width: 219px;height: 34px;" id="email" name="email" type="text"></td>
        </tr>
    </table>
</div>
<input type="button" onclick="submit()" class="reserveSubmit" value="确定">
<myscript>
<script>
    $(function () {
        $("#submit").attr("disabled", "true");
        monthChange();
        $('.showTextTotal').css('display', 'none');
        $('.hoverDetail').hover(function (e) {
            $(this).find('.showText').css('display', 'none');
            $(this).find('.showTextTotal').css('display', 'block');
        }, function () {
            $(this).find('.showTextTotal').css('display', 'none');
            $(this).find('.showText').css('display', 'block');
        });
    });
    function submit() {

        validName();
        validEmail();
        validIdCard();
        validPeers();
        validPhoneNum();
        var name = $("#occupancyName").val();
        var email = $('#email').val();
        var idCard = $('#IDCard').val();
        var peers = $("#peers").val();
        var phoneNum = $("#phoneNum").val();
        if (name == '' || email == '' || idCard == '' || peers == '' || phoneNum == '') {
            return;
        }
        var guids = $(".week:checked")
        var myHouseGuid = $("#myHouseGuid").val();
        var guid = '';
        for (var i = 0; i < guids.length; i++) {
            guid += i == guids.length - 1 ? guids.eq(i).val() : guids.eq(i).val() + ",";
        }
        if(guid==''){
            alert("未选中时间段");
            return false;
        }
        var occupancyName = $("#occupancyName").val();
        var IDCard = $("#IDCard").val();
        var phoneNum = $("#phoneNum").val();
        var email = $("#email").val();
        var peers = $("#peers").val();
        var remarks = $("#remarks").val();
        $.ajax({
            url: '/reserve/form',
            type: 'post',
            dataType: 'json',
            data: {occupancyName: occupancyName, IDCard: IDCard, phoneNum: phoneNum, email: email, peers: peers,
                remarks: remarks, myHouseGuid: myHouseGuid, guids: guid },
            success: function (data) {
                if (data == true) {
                    alert("预定成功，稍后会发送短信到你手机");
                    location.href = "/my_house/show";
                }
                else{
                    alert("无可用时间用于操作");
                }
            }
        })
    }

    function check() {
        var weeks = $('.week');
        for (var i = 0; i < weeks.length; i++) {
            weeks.eq(i).on('click', function () {
                if ($(this).find("label").hasClass('active')) {
                    $(this).find("label").removeClass('active');
                    $(this).find(":checkbox").attr('checked', false);
                } else {
                    $(this).find("label").addClass('active');
                    $(this).find(":checkbox").attr('checked', true);
                }
            })
        }
    }

    function monthChange() {
        var month = $(".weekMonth").val();
        var houseWeekGuid = $(".weekMonth").attr("data-guid");
        month = month.split("月")[0];
        $.ajax({
            url: '/reserve/house_week_time_by_month/' + month + "/" + houseWeekGuid,
            type: 'get',
            dataType: 'json',
            success: function (data) {
                var _html=""
                for (var i = 0;i<data.length;i++){
                    if(i==0){
                        _html+="<tr><td>时间:</td><td colspan='3'><input class='week' type='checkbox' value='"+data[i].guid+"'>"+data[i].start.replace(/-/g,'/')+"-"+data[i].end.replace(/-/g,'/')+"</td></tr>"
                    }else{
                        _html+="<tr><td></td><td colspan='3'><input class='week' type='checkbox' value='"+data[i].guid+"'>"+data[i].start.replace(/-/g,'/')+"-"+data[i].end.replace(/-/g,'/')+"</td></tr>"
                    }
                }
                $(".reserveWeek table tbody").html(_html);
            }
        })
    }

    function validEmail() {
        var email = $('#email').val();
        $.ajax({
            url: '/valid/userinfo/email',
            type: 'post',
            data: {email: email},
            success: function (data) {
                if (data) {
                    $('#email').parent("div").next('span').html('');
                    $("#submit").removeAttr("disabled");
                } else {
                    $('#email').parent("div").next('span').html('邮箱不正确!');
                    $("#submit").attr("disabled", "true");
                }
            }
        })
    }

    function validIdCard() {
        var idCard = $('#IDCard').val();
        $.ajax({
            url: '/valid/userinfo/idcard',
            type: 'post',
            dataType: 'json',
            data: {idCard: idCard},
            success: function (data) {
                if (data) {
                    $('#IDCard').parent("div").next('span').html('');
                    $("#submit").removeAttr("disabled");
                } else {
                    $('#IDCard').parent("div").next('span').html('身份证不正确!');
                    $("#submit").attr("disabled", "true");
                }
            }
        })
    }

    function validName() {
        var name = $("#occupancyName").val();
        if ("" == name) {
            $("#occupancyName").parent("div").next("span").html("不能为空!");
            $("#submit").attr("disabled", "true");
        } else {
            $("#occupancyName").parent("div").next("span").html("");
            $("#submit").removeAttr("disabled");
        }
    }

    function validPeers() {
        var peers = $("#peers").val();
        var reg = /^[0-9]+$/g;
        if (reg.test(peers)) {
            $("#peers").parent("div").next("span").html("");
            $("#submit").removeAttr("disabled");
        } else {
            $("#peers").parent("div").next("span").html("输入不正确!");
            $("#submit").attr("disabled", "true");
        }
    }

    function validPhoneNum() {
        var phoneNum = $("#phoneNum").val();
        var reg = /^[0-9]{11}$/g;
        if (reg.test(phoneNum)) {
            $("#phoneNum").parent("div").next("span").html("");
            $("#submit").removeAttr("disabled");
        } else {
            $("#phoneNum").parent("div").next("span").html("手机号不正确!");
            $("#submit").attr("disabled", "true");
        }
    }
</script>
</myscript>
</body>
</html>